<template>
  <div>
    <BasicTable @register="registerTable">
      <template #headerTop>
        <div class="text-lg font-bold my-2"> 终端日志 </div>
      </template>
      <template #tableTitle>
        <div class="space-x-2">
          <Select v-model:value="logType" placeholder="日志类型" allow-clear style="width: 180px">
            <Select.Option value="ALERT_LOG">告警日志</Select.Option>
            <Select.Option value="PROCESS_LOG">处理日志</Select.Option>
            <Select.Option value="RECEIVE_LOG">接收日志</Select.Option>
            <Select.Option value="RECEIVE_EXCEPTION_LOG">接收异常日志</Select.Option>
          </Select>
          <Select v-model:value="logLevel" placeholder="日志级别" allow-clear style="width: 150px">
            <Select.Option value="CRITICAL">紧急告警</Select.Option>
            <Select.Option value="WARNING">警告</Select.Option>
            <Select.Option value="INFO">信息</Select.Option>
          </Select>
          <RangePicker v-model:value="timeRange" format="YYYY-MM-DD" style="width: 280px" />
          <a-input v-model:value="searchText" placeholder="搜索设备ID或消息内容" allow-clear style="width: 240px">
            <template #suffix>
              <Icon icon="ant-design:search-outlined" />
            </template>
          </a-input>
          <a-button type="primary" @click="handleSearch"> <Icon icon="ant-design:search-outlined" /> 搜索 </a-button>
          <a-button @click="handleReset"> <Icon icon="ant-design:reload-outlined" /> 重置 </a-button>
        </div>
      </template>
      <template #logType="{ record }">
        <Tag :color="getLogTypeColor(record.logType)">
          {{ getLogTypeText(record.logType) }}
        </Tag>
      </template>
      <template #logLevel="{ record }">
        <Tag :color="getLogLevelColor(record.logLevel)">
          {{ getLogLevelText(record.logLevel) }}
        </Tag>
      </template>
      <template #createdTime="{ record }">
        {{ formatTime(record.createdTime) }}
      </template>
    </BasicTable>
    <TerminalLogDetail @register="registerModal" />
  </div>
</template>

<script lang="ts">
  export default defineComponent({
    name: 'ViewsTbTerminalLogList',
  });
</script>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { Tag, Select, RangePicker } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import dayjs, { Dayjs } from 'dayjs';
  import { getTerminalLogList, TerminalLogType, TerminalLogLevel } from '/@/api/tb/terminalLog';
  import TerminalLogDetail from './detail.vue';

  const logType = ref<TerminalLogType | undefined>();
  const logLevel = ref<TerminalLogLevel | undefined>();
  const searchText = ref('');
  const timeRange = ref<[Dayjs, Dayjs] | undefined>();
  const [registerModal, { openModal }] = useModal();

  const tableColumns: BasicColumn[] = [
    {
      title: '时间',
      dataIndex: 'createdTime',
      key: 'createdTime',
      width: 180,
      slot: 'createdTime',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',
      width: 150,
    },
    {
      title: '日志类型',
      dataIndex: 'logType',
      key: 'logType',
      width: 140,
      slot: 'logType',
    },
    {
      title: '日志级别',
      dataIndex: 'logLevel',
      key: 'logLevel',
      width: 100,
      slot: 'logLevel',
    },
    {
      title: '处理状态',
      dataIndex: 'processStatus',
      key: 'processStatus',
      width: 100,
    },
    {
      title: '内容摘要',
      dataIndex: 'contentSummary',
      key: 'contentSummary',
      align: 'left',
      ellipsis: true,
    },
  ];

  const actionColumn: BasicColumn = {
    width: 100,
    actions: (record: Recordable) => [
      {
        icon: 'ant-design:eye-outlined',
        title: '查看详情',
        onClick: () => openModal(true, record),
      },
    ],
  };

  const [registerTable, { reload }] = useTable({
    rowKey: (record) => record.id.id,
    api: fetchLogList,
    beforeFetch: wrapFetchParams,
    defSort: { sortProperty: 'createdTime', sortOrder: 'DESC' },
    columns: tableColumns,
    actionColumn: actionColumn,
    showTableSetting: false,
    useSearchForm: false,
    canResize: false,
    pagination: {
      pageSize: 20,
    },
  });

  function wrapFetchParams(param: any) {
    const params: any = {
      ...param,
      textSearch: searchText.value,
    };

    if (logType.value) {
      params.logType = logType.value;
    }

    if (logLevel.value !== undefined) {
      params.logLevel = logLevel.value;
    }

    if (timeRange.value && timeRange.value.length === 2) {
      params.startTime = timeRange.value[0].valueOf();
      params.endTime = timeRange.value[1].valueOf();
    }

    return params;
  }

  async function fetchLogList(param: any) {
    return await getTerminalLogList(param);
  }

  function getLogTypeText(type: TerminalLogType): string {
    const typeMap = {
      [TerminalLogType.ALERT_LOG]: '告警日志',
      [TerminalLogType.PROCESS_LOG]: '处理日志',
      [TerminalLogType.RECEIVE_LOG]: '接收日志',
      [TerminalLogType.RECEIVE_EXCEPTION_LOG]: '接收异常',
    };
    return typeMap[type] || type;
  }

  function getLogTypeColor(type: TerminalLogType): string {
    const colorMap = {
      [TerminalLogType.ALERT_LOG]: 'red',
      [TerminalLogType.PROCESS_LOG]: 'blue',
      [TerminalLogType.RECEIVE_LOG]: 'green',
      [TerminalLogType.RECEIVE_EXCEPTION_LOG]: 'orange',
    };
    return colorMap[type] || 'default';
  }

  function getLogLevelText(level: TerminalLogLevel | string): string {
    const levelMap = {
      CRITICAL: '紧急告警',
      WARNING: '警告',
      INFO: '信息',
    };
    return levelMap[level as string] || String(level);
  }

  function getLogLevelColor(level: TerminalLogLevel | string): string {
    const colorMap = {
      CRITICAL: 'red',
      WARNING: 'orange',
      INFO: 'blue',
    };
    return colorMap[level as string] || 'default';
  }

  function formatTime(timestamp: number): string {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
  }

  function handleSearch() {
    reload();
  }

  function handleReset() {
    logType.value = undefined;
    logLevel.value = undefined;
    timeRange.value = undefined;
    searchText.value = '';
    reload();
  }
</script>
